{% extends "base.html" %}

{% block head %}
  <link rel="stylesheet" type="text/css" href="/static/app.css"/>

  <script>
    video = {
        'id': 'cjlfk2gcl00u002s6o138ji1v',
        'location': 'https://firebasestorage.googleapis.com/v0/b/labelbox-193903.appspot.com/o/cji227p5ub6020794sz0dk57q%2F4d333587-4390-47ad-b644-5ba026e832af%2Ffrag_bunny.mp4?alt=media&token=d885537a-cb07-42b5-a87e-75617cef8275',
        'is_image_sequence': false,
        'annotated': false,
        'verified': false,
        'rejected': false,
    };
    imageList = 0,
    helpEmbedded = true;
  </script>
  <script src="/static/vendor/raphael/raphael.min.js"></script>
  <script src="/static/vendor/imgplay/jquery.imgplay.min.js"></script>
  <script type="text/javascript" src="/static/views/framePlayers.js"></script>
  <script type="text/javascript" src="/static/app.js"></script>
  <script type="text/javascript" src="/static/bounds.js"></script>
  <script type="text/javascript" src="/static/datasources.js"></script>
  <script type="text/javascript" src="/static/misc.js"></script>
  <script type="text/javascript" src="/static/player.js"></script>
  <script type="text/javascript" src="/static/annotation.js"></script>
  <script type="text/javascript" src="/static/views/keyframebar.js"></script>
  <script type="text/javascript" src="/static/views/annotationbar.js"></script>
  <script type="text/javascript" src="/static/views/player.js"></script>
  <script type="text/javascript" src="/static/views/rect.js"></script>

  <script type="text/javascript">
    // set up a new XMLHttpRequest variable
    var request = false;
    try {
        request = new XMLHttpRequest();
    } catch (trymicrosoft) {
        try {
            request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (othermicrosoft) {
            try {
                request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (failed) {
                request = false;
            }
        }
    }

    if (!request)
        alert("Error initializing XMLHttpRequest!");

    // what to do when http ready state changes
    function updatePage() {
        if (request.readyState == 4) {
            if (request.status == 200) {

                // get response array
                var data = JSON.parse(request.responseText);
                update_select($('select[name=states]'), data);
            }
            // some error checking
            else if (request.status == 404) {
                alert("Request url does not exist");
            }
            else {
                alert("Error: status code is " + request.status);
            }
        }
    }

    function update_select(select, data) {
        select.find('option').remove();
        for (var i=0; i<data.length; i++) {
            state = data[i]
            select.append($('<option value="' + state['name'] +'" style="background-color: #' + state['color'] + '">' + state['name'] + '</option>'));
        }
    }

    $(document).ready(function () {
      $("#labels").prop("selectedIndex", 0).change();
    });
  </script>

{% endblock %}

{% block body %}
<div class="panel panel-default panel-space player-container" id="player">

  <div class="row">

    <div class="top-controls">
      <select id="labels" name="labels">
        <option style="background-color: #FF0000" value="Object 1" id="object-radio-Object 1">
          Class label 1
        </option>
        <option style="background-color: #00FF00" value="Object 2" id="object-radio-Object 2">
          Second class
        </option>
        <option style="background-color: #0000FF" value="Object 3" id="object-radio-Object 3">
          The third class
        </option>
      </select>

      <a class="btn btn-default" target="_blank" style="margin-left: 25px;" id="show-help">
        Instructions &amp; Requirements
      </a>

      <div id="submit-container">
        <div id="submit-btn-group" class="btn-group" role="group">
            <button id="submit-btn" type="button" class="btn btn-primary">Submit</button>
        </div>
    </div>

    <div class="panel-body col-md-9">
      <div class="player-screen">
        <div class="player-video-container">
          <video class="player-video"></video>
        </div>
        <div class="player-paper"></div>
        <div class="player-loader">
          <div class="bounce1"></div>
          <div class="bounce2"></div>
          <div class="bounce3"></div>
        </div>
      </div>

      <div class="panel panel-primary bottom-controls">
        <div class="panel-heading">
          <input class="player-control-scrubber" type="range" min="0" max="10000" value="0" step="1"/>
          <div class="panel panel-success">
            <!-- <div class="panel-heading style="background-color: #3A7734"> -->
              <div class="player-keyframebar"></div>
            <!-- </div> -->
          </div>

          <span class="noselect">
            <div class="glyphicon glyphicon-fast-backward player-control-goto-start" title="Go to start"></div>
            <div class="glyphicon glyphicon-step-backward player-control-step-backward" title="One Frame Backward (shortcut - 'a')"></div>
            <div class="glyphicon glyphicon-play player-control-play-pause" title="Play / Pause (shortcut - 'space'')"></div>
            <div class="glyphicon glyphicon-step-forward player-control-step-forward" title="One Frame Forward (shortcut - 's')"></div>
            <div class="glyphicon glyphicon-fast-forward player-control-goto-end"></div>
            <div class="glyphicon glyphicon-trash player-control-delete-keyframe" title="Delete selected frame (shortcut - 'delete', 'd')"></div>
          </span>
          <input class="form-control player-control-time" id="frame-number" placeholder="0">
          <div class="pull-right">
            <input id="scale-checkbox" type="checkbox" />
            <label for="scale-checkbox">Scale to fit</label>
          </div>
        </div>
      </div>
    </div>

    <div class="player-annotationbar col-md-3 panel-group" id="accordion" style="padding-right: 30px; overflow-y: scroll; height: 100%;">
    </div>


{% include "modals/edit_label_modal.html" %}
{% include "modals/edit_state_modal.html" %}

{% include "modals/delete_annotation_modal.html" %}

{% include "modals/generic_modal.html" %}
{% include "modals/instructions.html" %}

</div>


<!-- this script defines window.Labelbox and sets labelbox-jwt in localstorage -->
<script type="text/javascript" src="https://api.labelbox.com/static/labeling-api.js"></script>
{% endblock %}


